<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>积分商城</title>
		 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no">			
		<link rel="stylesheet" href="css/wzl-bootstrap.css" />
		<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<style>	
			body{width:100%;	margin:0;padding:0;background-color: #E5E5E5;position: relative;}	
			ul{list-style: none;}
			a{text-decoration: none;}
			#goods-section li:first-child{border-bottom:2px solid #E5E5E5;height:100px;}					
			#goods-section li:first-child img{width:146px;}	
			#goods-section li .goodsInfo-right{font-size:10px;position:relative}
			#goods-section li .goodsInfo-right p{height:28px;line-height: 28px;	margin-bottom:0;}
			#goods-section li .goodsInfo-right p {text-align:left;font-size:14px;}
			#goods-section li .goodsInfo-right .detail{color:#007AFF;font-family:'MicrosoftYaHei', 'Microsoft YaHei';font-size:14px;}						
			.col-xs-8,.container-fluid,.col-xs-7,.col-xs-6,.col-xs-3,.col-xs-12,.col-xs-5,.col-xs-4,.col-xs-9{padding:0;}
			#goods-section ul{list-style: none; margin:0;padding:0;padding-bottom:22px;margin-top:10px;padding-top:2px;border-bottom:2px solid #E5E5E5;background-color: #fff;}	
			#goods-section li .goodsInfo-right{padding-left:1vw;}	
			#goods-section li .goodsInfo-right .recommend{margin-bottom:2vw;display:inline-block; font-size:12px;color:#6B6B6B}
			#goods-section li:nth-child(2) {font-size:12px;height:60px;line-height: 50px; text-align: center;margin-top:8px;padding-bottom:10px;border-bottom:2px solid #E5E5E5;}								
			#goods-section li:nth-child(2) .col-xs-5{overflow: hidden;}
			#goods-section li:nth-child(2) div:nth-child(3) span{display:inline-block;width:30px;height:30px;text-align:center;line-height:28px;background-color: #FF0000;font-size:18px;color:#FFFFFF;border-radius: 5px;}
			#goods-section li:nth-child(2) input{margin:0 1px;height:30px;line-height:30px;}
			#goods-section li:nth-child(3){background-color: rgba(255, 0, 0, 1);box-sizing: border-box;border-width: 1px;border-style: solid;border-color: rgba(255, 102, 0, 1); border-radius: 5px;font-size:14px; color: #FFFFFF; height:40px;line-height: 40px;text-align:center;margin-top:20px}												   			   		
	   		#goods-section  .goods-guzhen span{border:1px solid #999;height:35px;line-height:35px;display:inline-block;width:96px;border-radius: 5px;}
	   		#goods-section .goods-guzhen span:nth-child(2){margin:0 5px;}
	   		#goods-section .goods-guzhen .active{border-color: #f44; background-color: #f44;color:#fff;}
	   		#goods-section ul:nth-child(1) .goods-guzhen{width:100%;margin:0 auto;height:100px;}
	   		#goods-section ul:nth-child(1) .goods-guzhen span:nth-child(4),#goods-section ul:nth-child(1) .goods-guzhen span:nth-child(5){ width:146px;}
	   		#goods-section ul:nth-child(1) li:nth-child(3) input{margin:0 1px;height:30px;line-height:30px;}	   		
	   		#goods-section ul:nth-child(1) li:nth-child(3) div:nth-child(3) span{display:inline-block;width:30px;height:30px;text-align:center;line-height:28px;background-color: #FF0000;font-size:18px;color:#FFFFFF;border-radius: 5px;}
	   		#goods-section ul:nth-child(1) li:nth-child(3){background-color:#fff;box-sizing: border-box;border:none; border-radius:0px;font-size:12px; color:black; height:40px;line-height: 40px;text-align:center;margin-top:20px}
			#goods-section ul:nth-child(1) li:nth-child(4){background-color: rgba(255, 0, 0, 1);box-sizing: border-box;border-width: 1px;border-style: solid;border-color: rgba(255, 102, 0, 1); border-radius: 5px;font-size:14px; color: #FFFFFF; height:40px;line-height: 40px;text-align:center;margin-top:20px}												   		
	   		.recommend{margin-bottom:5px;}
	   		.menpiao{font-size:9px}
	   		#goods-section li:nth-child(1) .stamp img{width:22vw; max-width:90px;position: absolute;bottom:-27px;right:12px;}
	   		.pay-container{display:none;height:100%;width:100%;	position:fixed;	bottom:0;background: rgba(0,0,0,0.2);}		
			.payBlockContainer{display: block;}	
			.pay-container ul{list-style: none;width: 100%;height: 245px;position: fixed;left:0px; bottom:0px;font-size:13px;background-color: #fff;margin:0px;padding:0px;}
			.pay-container ul li{padding-left:15px;}
			.pay-container ul li:first-child{height:40px;line-height:40px;border-bottom:1px solid #E0E0E0}
			.pay-container ul li b{float:right;font-size:20px;font-weight: normal;text-align:center;display: inline-block;width:60px;}
			.pay-container ul li:nth-child(2){text-align:center;margin-top:20px}
			.money,.payMoney,.points{color:#E4393C;}			
			.pay-container ul li:nth-child(2) .money{font-size:28px;}
			.pay-container ul li:nth-child(3){width:80%;margin-left:10%;margin-top:30px;font-size:16px;text-align:center;height:39px;line-height: 30px;color:#fff;background-color: #4cd964;;}
			.quantity{width:40px; height:30px;text-align:center;font-size:13px;}
			#goods-nav .wzl-navbar{margin-bottom:0px;}	
			#guZhenSelection,.singleSelection{display: flex;padding-left:3px;padding-right:3px;}	
			#guZhenSelection div:nth-child(3),.singleSelection div:nth-child(3){flex:1;text-align:right;}
		</style>
	</head>
	
	<body>
		<div id="goods-nav">
			<nav class="wzl-navbar navbar-default" role="navigation" >
		        <div class="container-fluid">
		            <div class="navbar-header">
		                <div class="wzl-nav-bar" onclick="history.back(-1)">
		                    <span class="glyphicon glyphicon-wzl-back" ></span>积分商城
		                </div>
		            </div>
		        </div>
		    </nav>
		</div>
		
		<div id="goods-section">
			<ul class="container-fluid">
				<li class="row">
					<div class="goodsInfo-left col-xs-5"><img src="imgs/goods/u669.jpg" alt="" /></div>
					<div class="goodsInfo-right col-xs-7">
						<p><span >南浔古镇门票</span> </p>
						<span>价格：80元~190元</span><br>
						<span class="detail"><a href="views/guzhen.html">详情>></a></span>	
						<span class="stamp"><img src="imgs/goods/stamp.png" alt="" /></span>
						
					</div>
				</li>
				<li class="goods-guzhen">					
					<span value="80" class="active">成人票</span>
					<span value="150" class="">双人套餐</span>
					<span value="120" class="">一大一小(亲子票)</span>					    					
					<span value="190" class="">2大1小(家庭票)</span>
					<span value="40" class="">儿童票(身高含1.2-1.4M)</span>											
				</li>
				<li class="col-xs-12 multipleSelection" id="guZhenSelection">
					<div class="">金额：<span class="payMoney" value="80">80元</span></div>
					<div class="">(免费领<span class="points" value="80">80</span>元等值足彩)</div>
					<div class=""><span class="quantityReduce">-</span><input type="text" value="1"  class="quantity"/><span class="quantityAdd">+</span></div>
				</li>
				<li class="col-xs-10 col-xs-offset-1 goumai">立即购买</li>
			</ul>
			<ul class="container-fluid">
				<li class="row">
					<div class="goodsInfo-left col-xs-5"><img src="imgs/goods/u669.jpg" alt="" /></div>
					<div class="goodsInfo-right col-xs-7">
						<p><span>下渚湖景区成人票</span> <!--<span >200元/每张</span>--></p>
						<span>价格：60元/每张</sapn><br/>
						<!--<span class="recommend">门票介绍</span><br/>-->
						<span class="detail"><a href="views/xiazhuhu.html">详情>></a></span>
						<span class="stamp"><img src="imgs/goods/stamp.png" alt="" /></span>
					</div>
				</li>
				<li class="col-xs-12 singleSelection">
					<div class="">金额：<span class="payMoney" value="60">60元</span></div>
					<div class="">(免费领<span class="points" value="60">60</span>元等值足彩)</div>
					<div class=""><span class="quantityReduce">-</span><input type="text" value="1"  class="quantity"/><span class="quantityAdd">+</span></div>
				</li>
				<li class="col-xs-10 col-xs-offset-1 goumai">立即购买</li>
			</ul>	
			<ul class="container-fluid">
				<li class="row">
					<div class="goodsInfo-left col-xs-5"><img src="imgs/goods/u669.jpg" alt="" /></div>
					<div class="goodsInfo-right col-xs-7">
						<p><span>安吉江南天池汤泉门票</span> <!--<span >200元/每张</span>--></p>
						<span>价格：198元/每张</sapn><br/>
						<!--<span class="recommend">门票介绍</span><br/>-->
						<span class="detail"><a href="views/tianchi.html">详情>></a></span>
						<span class="stamp"><img src="imgs/goods/stamp.png" alt="" /></span>
					</div>
				</li>
				<li class="col-xs-12 singleSelection">
					<div class="">金额：<span class="payMoney" value="198">198元</span></div>
					<div class="">(免费领<span class="points" value="198">198</span>元等值足彩)</div>
					<div class=""><span class="quantityReduce">-</span><input type="text" value="1"  class="quantity"/><span class="quantityAdd">+</span></div>
				</li>
				<li class="col-xs-10 col-xs-offset-1 goumai">立即购买</li>
			</ul>			
		</div>
		<div class="pay-container">
			<ul>
				<li>订单金额：<span class="money">200元</span> <b class="btn-close">x</b></li>				
				<li>
					需要支付<br>
					<div class="money Money">200元</div>
				</li>
				<li class="btn" >微信支付</span></li>				
			</ul>
		</div>
		<script src="js/jquery-1.8.0.min.js"></script>	
		<!--<script src="wzlh5/js/jquery.cookie.js"></script>
		<script type="text/javascript" src="wzlh5/js/common.js"></script>				
		<script type="text/javascript" src="wzlh5/js/recharge.js"></script>	-->
		<script>			
			var  payMoneyValue,
				 multiplePayMoneyValue,
				 pointsValue;		
			$(".goods-guzhen").on('click','span',function(e){					
			 	$(this).addClass('active').siblings().removeClass("active");
			 	var mount=$(this).parent().next().children().children("input[class='quantity']").attr('value');
			    multiplePayMoneyValue=$(this).attr("value");		  
			 	$(this).parent().next().children().eq(0).children().attr("value",multiplePayMoneyValue);
			 	$(this).parent().next().children().eq(1).children().attr("value",multiplePayMoneyValue);
			 	$(this).parent().next().children().eq(0).children().html(mount*multiplePayMoneyValue+"元")
			 	$(this).parent().next().children().eq(1).children().html(mount*multiplePayMoneyValue)
			})
			$('#goods-section ul li').on('click','.quantityReduce',function(e){	
				var mount=$(this).siblings("input").attr('value');				
				mount--;
				multiplePayMoneyValue=$(this).parent().parent().prev().children().children("span[class='active']").attr("value");
				payMoneyValue=$(this).parent().siblings().eq(0).children("span[class='payMoney']").attr('value');
				pointsValue=$(this).parent().siblings().eq(1).children("span[class='points']").attr('value');
				if(multiplePayMoneyValue){
					$(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*multiplePayMoneyValue+"元");								
				    $(this).parent().siblings().eq(1).children("span[class='points']").html(multiplePayMoneyValue*mount);					   
				}else{
					$(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*payMoneyValue+"元");								
				   $(this).parent().siblings().eq(1).children("span[class='points']").html(pointsValue*mount);					 
				}															
				if(mount<1){
					mount=1;
					if(multiplePayMoneyValue){
					$(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*multiplePayMoneyValue+"元");								
				    $(this).parent().siblings().eq(1).children("span[class='points']").html(multiplePayMoneyValue*mount);					   
				}else{
					$(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*payMoneyValue+"元");								
				   $(this).parent().siblings().eq(1).children("span[class='points']").html(pointsValue*mount);					 
				}	
				}
				$(this).siblings("input").attr('value',mount);										
			})			
			$('#goods-section ul li').on('click','.quantityAdd',function(){	
				var mount=$(this).siblings("input").attr('value');
				mount++;								
				multiplePayMoneyValue=$(this).parent().parent().prev().children().children("span[class='active']").attr("value");
				payMoneyValue=$(this).parent().siblings().eq(0).children("span[class='payMoney']").attr('value');
				pointsValue=$(this).parent().siblings().eq(1).children("span[class='points']").attr('value');
				if(multiplePayMoneyValue){
					$(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*multiplePayMoneyValue+"元");								
				    $(this).parent().siblings().eq(1).children("span[class='points']").html(multiplePayMoneyValue*mount);					 					
				}else{
				    $(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*payMoneyValue+"元");								
				    $(this).parent().siblings().eq(1).children("span[class='points']").html(pointsValue*mount);					 
				}																			
				$(this).siblings("input").attr('value',mount);	
			})
			$('.quantity').change(function(event) {
				event.stopPropagation();
	            mount=$(this).val();	               
			    multiplePayMoneyValue=$(this).parent().parent().prev().children().children("span[class='active']").attr("value");
				payMoneyValue=$(this).parent().siblings().eq(0).children("span[class='payMoney']").attr('value');
				pointsValue=$(this).parent().siblings().eq(1).children("span[class='points']").attr('value');
				if(multiplePayMoneyValue){
					$(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*multiplePayMoneyValue+"元");								
				    $(this).parent().siblings().eq(1).children("span[class='points']").html(multiplePayMoneyValue*mount);					    
				}else{
				$(this).parent().siblings().eq(0).children("span[class='payMoney']").html(mount*payMoneyValue+"元");								
				 $(this).parent().siblings().eq(1).children("span[class='points']").html(pointsValue*mount);	
				
				}																			
				$(this).siblings("input").attr('value',mount);	
            })			
			$('.btn').on('click',function(){
				var points=$(".Money").text().replace("元","");
				localStorage.setItem("points",points);
				setTimeout(function(){
					location.href="views/buySuccess.html"
					$('.pay-container').removeClass('payBlockContainer');
				},200)				
			})
			$('.btn-close').on('click',function(){
				$('.pay-container').removeClass('payBlockContainer');	
			})
			$('.goumai').on('click',function(){	
				mount=$(this).prev().children().eq(2).children("input[class='quantity']").attr("value");				
				payMoneyValue=$(this).prev().children().eq(0).children().attr("value");
			 	points=$(this).prev().children().eq(1).children().attr("value");
			 	$('.money').html(mount*payMoneyValue+"元");
				$('.pay-container').addClass('payBlockContainer');				
				localStorage.setItem('mount',mount);
				var className=$(this).prev().prev().attr('class');
			console.log(className);
				var menPiaoName;
				if(className=="goods-guzhen"){
					menPiaoName="南浔古镇门票";
				}else if(className=="row"){
					menPiaoName=$(this).prev().prev().children().eq(1).children().eq(0).children().text();
					console.log(menPiaoName)
				}
				localStorage.setItem('menPiaoName',menPiaoName);
				
			})
			
		</script>
	</body>
</html>
